<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../../common/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DSP</title>
<%@include file="../../common/link.jsp"%>
</head>

<body>
	<!-- WRAPPER START -->
	<div class="container_16" id="wrapper">
		<%@ include file="../../common/welcome.jsp"%>

		<%@ include file="../../common/navigation.jsp"%>
		<div class="grid_16" id="content">
		<div class="grid_9">
			<h1 class="dashboard">Dashboard</h1>
		</div>
		<div class="clear">&nbsp;</div>
			<div id="portlets">
				<div id="dialog_div" style="display: none;padding:2px;">
					<script type="text/javascript">
						function commit() {
							var succ = false;
							if ($("#form1").jVal({
								style : 'cover',
								padding : 3,
								border : 1,
								wrap : true
							})) {
								var form = $("#form1").serializeObject();
								var s_data = JSON.stringify(form);
								$.ajax({
									type : "POST",
									contentType : 'application/json',
									url : 'users_create',
									data : s_data,
									dataType : 'json',
									success : function(data) {
										succ = true;
										$("#dialog_div").dialog("close");
										$("#flexigrid").flexReload(); //重新加载数据
									},
									error : failed
								});
							}
							return succ;
						}
					</script>
					<form action="" id="form1">
						<table border="0" cellpadding="0" cellspacing="0" id="id-form">
							<tr>
								<th>用户名:</th>
								<td><input type="text" name="username" id="username"
									jVal="{valid:function(val){ if (val.length < 4) return 'Invalid Name'; else return ''}}" /><input
									type="text" name="id" id="id" />
								</td>
							</tr>
							<tr>
								<th>密码:</th>
								<td><input type="password" name="password" id="password"
									maxlength="50"
									jVal="{valid:function(val){if(val.length < 6) return false ; else return true;} , message:'Password of 6 or more characters required'}">
								</td>
							</tr>
							<tr>
								<th>显示名称 :</th>
								<td><input type="text" name="showname" id="showname">
								</td>
							</tr>
							<tr>
								<th>是否有效 :</th>
								<td><select name="enabled" id="enabled">
										<option value="true">有效</option>
										<option value="false">失效</option>
								</select></td>
							</tr>
						</table>
					</form>
				</div>
			</div>

			<table id="flexigrid" style="display: none;">
			</table>
			<script type="text/javascript">
				$(function() {
					$("#dialog_div").dialog({
						autoOpen : false,
						height : 310,
						width : 600,
						modal : true,
						title : "帐户管理"
						/**,beforeclose:function(event ,ui) {
								var succ = commit();
								return succ;
						}*/
						,
						buttons : {
							'OK' : function() {
								commit();
							},
							'Cancel' : function() {
								$(this).dialog("close");
							},
							'Reset' : function() {
								$(this).children('form')[0].reset();
							}
						}
					});
					$("#flexigrid").flexigrid({
						url : 'users_list',
						dataType : 'json',
						colModel : [ {
							display : "ID",
							name : 'id',
							width : 10,
							align : 'center'
						}, {
							display : 'UserName',
							name : 'username',
							width : 140,
							//sortable : true,
							align : 'left'
						}, {
							display : 'ShowName',
							name : 'showname',
							width : 140,
							//sortable : true,
							align : 'left'
						}, {
							display : 'Password',
							name : 'password',
							width : 140,
							//sortable : true,
							align : 'left'
						}, {
							display : 'Enabled',
							name : 'enabled',
							width : 140,
							//sortable : true,
							align : 'center'
						} ],
						buttons : [ {
							name : "Add",
							bclass : 'add',
							onpress : call
						}, {
							name : "Delete",
							bclass : 'delete',
							onpress : call
						}, {
							separator : true
						} ],
						searchitems : [ {
							display : "UserName",
							name : "username"
						}, {
							display : "Enabled",
							name : "enabled"
						} ],
						//sortname : "username",
						//shortorder : 'asc',
						usepager : true,
						checkbox : true,
						title : "Users Manager",
						useRp : true,
						showTableToggleBtn : true,
						height : 400,
						width : 938,
						dclick : aaa,
						eclick : openList
					});
					function call(com, grid) {
						if (com == 'Delete') {
							confirm('Delete ' + $('.trSelected', grid).length
									+ ' items?')
							var xxx = $('.trSelected', grid).attr('id')
									.replace("row", '');
							var s_data = JSON.stringify({
								id : xxx
							});
							$.ajax({
								type : "POST",
								contentType : 'application/json',
								data : s_data,
								dataType : 'json',
								url : 'users_delete',
								success : function(data) {
									alert('succ');
									$("#flexigrid").flexReload(); //重新加载数据
								},
								error : function(data) {
									alert('false');
								}
							})
						} else if (com == 'Add') {
							$("#dialog_div").dialog('open').children('form')[0].reset();
						}
					}
					//双击事件 调用子表资料
					function aaa(index) {
						alert(index + 'adfasf');
					}
					/**
					  查看或者修改资料
					 */
					function openList(index) {
						$("#dialog_div").dialog('open').children('form')[0]
								.reset();
						var s_data = JSON.stringify({
							id : index
						});
						$.ajax({
							type : "POST",
							contentType : 'application/json',
							url : 'users_edit',
							data : s_data,
							dataType : 'json',
							success : function(data) {
								succ = true;
								$("#id").attr("value", data.id);
								$("#username").attr("value", data.username);
								$("#password").attr("value", data.password);
								$("#showname").attr("value", data.showname);
							},
							error : failed
						});
					}
				});
			</script>
			<div class="clear">&nbsp;</div>
		</div>
		<div class="clear">&nbsp;</div>
		<div class="clear"></div>
	</div>
	<%@ include file="../../common/footer.jsp"%>
</body>
</html>
